<template>
	<view class="searchPage">
		<view class="search">
			<template v-if="searchList.length === 0">
				<view class="searchHistory">搜索历史</view>
				<view class="searchText">
					<block v-for="(item,index) in historyList" :key="index">
						<view hover-stop-propagation hover-class="searchTextHover" @click="tapSearchHistory(item)">{{item}}</view>
					</block>
				</view>
			</template>

			<template v-else>
				<block v-for="(item,index) in searchList" :key="index">
					<!-- 帖子 -->
					<template v-if="type === 'index'">
						<common-list :item="item" :index="index" />
						<divider />
					</template>

					<!-- 话题 -->
					<template v-else-if="type === 'dynamic'">
						<topic-list :item="item" :index="index" />
					</template>

					<!-- 好友 -->
					<template v-else-if="type === 'friendslist'">
						<user-info :item="item" :index="index" />
					</template>

					<!-- 用户 -->
				</block>
			</template>
		</view>
	</view>
</template>

<script>
	// 帖子 index
	import commonList from "@/components/common/common-list.vue";
	// 话题 dynamic
	import topicList from "@/components/dynamic/topic-list.vue";
	// 用户 friendslist
	import userInfo from "@/components/friendslist/user-info.vue";
	// 好友 news

	export default {
		components: {
			commonList,
			topicList,
			userInfo
		},
		// 监听原生的标题搜索输入框的内容的变化
		onNavigationBarSearchInputChanged(e) {
			this.searchText = e.text;
		},
		// 监听原生导航栏的搜索按钮
		onNavigationBarButtonTap(e) {
			// 判断点击了导航栏的第几个按钮(从左往右数)
			if (e.index === 0) this.searchs();
		},
		onLoad(e) {
			this.type = e.type || "index";
			// 修改原生导航栏的状态
			this.setTitleNViewStyle(e.type || "index");
		},
		data() {
			return {
				// 搜索文本
				searchText: "",
				historyList: ["好的你个", "您渠道了吧", "我自己的了吧", "你电脑", "你电脑不是的了吧"],
				searchList: [],
				// 页面跳转时的类型
				type: void 0,
			};
		},
		methods: {
			// 修改原生导航栏的状态
			setTitleNViewStyle(type) {
				let pageTitle = void 0;
				switch (type) {
					case "dynamic":
						pageTitle = "搜索话题";
						break;
					case "news":
						pageTitle = "搜索好友";
						break;
					case "friendslist":
						pageTitle = "搜索用户";
						break;
					default:
						pageTitle = "搜索帖子";
						break;
				};
				// #ifdef APP-PLUS
				let currentWebview = this.$mp.page.$getAppWebview();
				let tn = currentWebview.getStyle().titleNView;
				tn.searchInput.placeholder = pageTitle;
				currentWebview.setStyle({
					titleNView: tn
				});
				// #endif
			},
			// 点击历史记录进行搜索
			tapSearchHistory(text) {
				this.searchs(text);
			},
			// 输入框中进行搜索
			searchContent(e) {
				this.searchs(e.detail.value);
			},
			// 对搜索方法进行封装
			async searchs(text) {
				// 隐藏软键盘
				uni.hideKeyboard();

				// 请求搜索
				// 显示加载
				let callFunParameter = null;
				switch (this.type) {
					case "dynamic":
						callFunParameter = {
							name: "index",
							method: "query"
						};
						break;
					default:
						callFunParameter = {
							name: "index",
							method: "query"
						};
						break;
				};
				uni.showLoading();
				let res = await uniCloud.callFunction({
					// 根据从不同的页面进来传递不同的参数
					// callFunParameter
					name: "index",
					method: "query"
				});
				this.searchList = res.result.data;
				// 隐藏加载
				uni.hideLoading();
			},



		}
	}
</script>

<style lang="scss">
	.search {
		padding: 20rpx 0rpx;

		.searchHistory {
			padding: 0rpx 30rpx;
		}
	}

	.searchText {
		margin-top: 10rpx;
		padding: 0rpx 20rpx;
		@include flexCenter;
		flex-wrap: wrap;

		>view {
			font-size: 28rpx;
			@include margins(10rpx);
			border: 1rpx solid #999999;
			border-radius: 10rpx;
			padding: 6rpx;
		}
	}

	.inputs {
		text-align: center;
	}

	// 点击搜索历史
	.searchTextHover {
		animation: rubberBand;
		animation-duration: .5s;
		color: red;
	}
</style>
